<script setup>
import { reactive, ref, onMounted, computed } from 'vue'
import { getGraphAPI } from '@/api/street'
const emit = defineEmits(['change'])
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)
const graphObj = ref({})
const getGraph = async () => {
  const res = await getGraphAPI()
  graphObj.value = res.data
}

const showDetail = (item) => {
  console.log(item, '13---')
  emit('change', item, graphObj.value.positionList)
}

onMounted(() => {
  getGraph()
})
</script>

<template>
  <movable-area class="movable-area">
    <movable-view class="movable-view" direction="all">
      <image :src="`${IMAGE_URL}${graphObj.graphUrl}`" mode="heightFix"></image>
      <view
        class="tooltip"
        v-for="(item, index) in graphObj.positionList"
        :key="index"
        :style="{ left: item.skewLeft + 'px', top: item.skewTop + 'px' }"
        @click="showDetail(item)"
      >
        <image src="../../static/images/common/build.png" mode="aspectFill" />
        {{ item.streetName }}
      </view>
    </movable-view>
  </movable-area>
</template>

<style lang="scss" scoped>
.movable-area {
  background: #000;
  width: 100%;
  height: 100vh;
  .movable-view {
    position: relative;
    width: 1100px;
    height: 100vh;
    image {
      width: 100%;
      height: 100%;
    }
    .tooltip {
      position: absolute;
      padding: 10rpx 24rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #ea5404;
      background: #ffffff;
      border-radius: 24rpx;
      display: flex;
      align-items: center;
      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 6rpx;
      }
    }
  }
}
</style>
